<template>
  <p>{{ obj.age }}</p>
  <button @click="handleClick">修改age</button>
</template>

<script>
import { ref, shallowRef } from 'vue'
export default {
  setup() {
    // reactive 或 ref 默认都是递归劫持的，一旦进行包裹，对里面所有数据的修改都是响应式的

    /* reactive({
      value: {
        age: 18,
        a: {
          b: {
            c: {
              d: 'Hello World',
            },
          },
        },
      },
    }) */
    // !下面写法和上面类似
    /* const obj = ref({
      age: 18,
      a: {
        b: {
          c: {
            d: 'Hello World',
          },
        },
      },
    }) */
    // !shallowRef 如果包装的简单数据类型，和 ref 没差别，复杂数据类型才有区别
    const obj = shallowRef({
      age: 18,
      a: {
        b: {
          c: {
            d: 'Hello World',
          },
        },
      },
    })
    const handleClick = () => {
      // 注意：第一层是 value 对应的数据，下面不叫第一层，所以不是响应式的
      // obj.value.age = 22
      // 对 value 的修改才叫对第一层的修改，才是响应式的
      obj.value = { age: 22 }
    }
    return {
      obj,
      handleClick,
    }
  },
}
</script>
